<template>
    <div class="content-box">
        <div class="serchBox clearfix">
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
            </easyForm>
        </div>
        <div class="containerBox">
            <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
                <el-table-column
                    align="center"
                    :prop="item.name"
                    :label="item.label"
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    :width="item.width"
                >
                </el-table-column>
            </el-table>
            <div class="page_box">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref , reactive} from 'vue'
import type { FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'

const formList = {
    base: [
        { label: '操作账号', field: 'count',  },
        { label: '操作内容', field: 'content',  },
        { label: '操作时间', field: 'date', type:'date' },
    ],
}
const fieldList: Form.FieldItem[] = formList.base;

const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '搜索',
    resetButtonText: '重置',
    showResetButton:true,
    showSubmitButton:true,
};

// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        inlineFlag:true,
        count: '',
        content: '',
        date:''
    })
// 表格内容
let tableLayout = ref('fixed')
let tableHeader = [
    {
        label:"操作账号",
        width: 200,
        name:"name"
    },
    {
        label:"操作时间",
        width: 200,
        name:"time"
    },
    {
        label:"操作内容",
        name:"content"
    }

]
 ;
let tableData = [{
        name: '张三',
        time: '2022-12-01 14:56:28',
        content: '登录系统',
      }, {
        name: '李四',
        content: '编辑用户xxx的信息',
        time: '2022-12-12 09:22:32',
      }, {
        name: '王五',
        content: '修改咨询订单122222222',
        time: '2022-11-20 11:23:45',
      }, {
        name: '赵六',
        content: '登录系统',
        time: '2022-12-01 14:56:28',
      }]

// 搜索按钮
let search = (searchCon: any,formRef: any) => {
    console.log(searchCon)
    console.log(formRef)
}
// 重置按钮
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>